<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 后台管理开发框架</title>
<link href="/favicon.ico" rel="icon">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="/asset/layui/css/layui.css" rel="stylesheet" type="text/css" />
<link href="/asset/css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<link href="/asset/css/message.css" rel="stylesheet" type="text/css" />
<div class="layui-tab layui-tab-brief" >

    <ul class="layui-tab-title" style="text-align: center;">
        <li class="layui-this" id="msg" >通知(1)</li>
        <li id="comment" >私信(1)</li>
        <li id="things" >待办(1)</li>
    </ul>

     <div class="layui-tab-content" style="padding: 5px 0px;">

        <div class="layui-tab-item layui-show">
            
            <div class="layui-message-list" >
                <volist  name="list['msg']" id="vo">
                    <a class="layui-message-list-item" href="javascript:;">
                    <img class="layui-message-item-icon" src="/asset/images/message.png">
                    <!-- <i class="layui-message-item-icon layui-icon layui-icon-email"></i> -->
                    <div class="layui-message-item-right">
                        <h2 class="layui-message-item-title">通知</h2>
                        <p class="layui-message-item-text">2021-09-09 12:28:28</p>
                    </div>
                </a>
                </volist>
            </div>

            <!-- // 列表为空 -->
            <div class="layui-message-list-empty" style="display:none;">
                <img src="/asset/images/noting.png"><div>没有通知</div>
            </div>  

            <!-- // 底部操作 -->
            <notempty name="$list['msg']">
            <div class="layui-message-footer">
            <a href="javascript:;" class="clear" lay-type="msg">清空通知</a><span>|</span><a href="javascript:;" class="more">查看更多</a>
            </div>
            </notempty>
        </div>
   
        <div class="layui-tab-item">

            <div class="layui-message-list" >
                <volist  name="list['comment']" id="vo">
                <a class="layui-message-list-item" href="javascript:;">
                    <img class="layui-message-item-icon" src="/asset/images/head.png">
                    <div class="layui-message-item-right">
                        <h2 class="layui-message-item-title">私信</h2>
                        <p class="layui-message-item-text">私信私信私信</p>
                        <p class="layui-message-item-text">2021-09-09 12:28:28</p>
                    </div>
                </a>
                </volist>

            </div>

            <!-- // 列表为空 -->
            <div class="layui-message-list-empty" style="display:none;" >
                <img src="/asset/images/noting.png"><div>没有私信</div>
            </div>  
            <notempty name="$list['msg']">
            <div class="layui-message-footer">
				<a href="javascript:;" class="clear"lay-type="comment">清空私信</a><span>|</span><a href="javascript:;" class="more">查看更多</a>
            </div>
            </notempty>
        </div>

        <div class="layui-tab-item">

            <div class="layui-message-list" >
                <volist  name="list['things']" id="vo">
                <a class="layui-message-list-item" href="javascript:;">
                    <div class="layui-message-item-right">
                        <eq name="$vo['type']" value="0">
                            <span class="layui-badge pull-right">待完成</span>
                            <else/>
                            <!--span class="layui-badge layui-bg-gray pull-right">已完成</span-->
                        </eq>
                        <h2 class="layui-message-item-title">待办</h2>
                        <p class="layui-message-item-text">2021-09-09 12:28:28</p>
                    </div>
                </a>
                </volist>
                <a id="more" class="layui-message-btn-more" href="javascript:;">更多</a> 
            </div>
           
            <!-- // 列表为空 -->
            <div class="layui-message-list-empty" style="display:none;">
                <img src="/asset/images/noting.png"><div>没有待办</div>
            </div>  
            <notempty name="$list['things']">
            <div class="layui-message-footer">
            <a href="javascript:;" class="clear" lay-type="things">清空待办</a><span>|</span><a href="javascript:;" class="more">查看更多</a>
            </div>
            </notempty>
        </div>

    </div>
</div>

<script src="/asset/layui/layui.js?v=1.0.0"></script>
<script src="/asset/js/common.js?v=1.0.0"></script>

<script>
    layui.use(['element'], function () {
        var $ = layui.jquery;
        var element = layui.element;

        // 加载更多
        $('#more').click(function (obj) {
            layui.iziToast.info({
                message: '没有更多了！',
            });                      
        })

        // 清空消息点击事件
        $('.clear').click(function (obj) {
            var that = $(this), typeElem = that.attr('lay-type');
            var findElem = $('#' + typeElem);

            // 删除元素
            that.parent().prev().prev().remove();
            that.parent().prev().show();
            that.parent().remove();
            // 替换标题
            findElem.text(findElem.text().replace(/\([^\)]*\)/,''));

            // 执行AJAX请求...
            
        });
    });
</script>